<template>
	<div class="swiper">
		<h2>测试</h2>
		<div class="swiper-box">
			<swiper
				class="swiper"
				:options="swiperOption"
				ref="mySwiper"
				@slideChange="handleClickSlide"
			>
				<swiper-slide>
					<img src="../assets/images/p1.jpeg" class="swiper-img" />
				</swiper-slide>
				<swiper-slide>
					<img src="../assets/images/p2.jpeg" class="swiper-img" />
				</swiper-slide>
				<swiper-slide>
					<img src="../assets/images/p3.jpeg" class="swiper-img" />
				</swiper-slide>
				<!-- 分页器 -->
				<div class="swiper-pagination" slot="pagination"></div>
				<!-- 导航按钮 -->
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div>
			</swiper>
		</div>
	</div>
</template>

<script>
import SwiperClass, { Navigation, Pagination } from 'swiper';
SwiperClass.use([Navigation, Pagination]);

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';

import 'swiper/swiper-bundle.css';

export default {
	name: 'swiperPage',
	components: {
		Swiper,
		SwiperSlide,
	},
	directives: {
		swiper: directive,
	},
	data() {
		return {
			swiperOption: {
				loop: true, // 循环模式选项
				pagination: {
					// 如果需要分页器
					el: '.swiper-pagination',
					clickable: true,
				},
				navigation: {
					// 如果需要前进后退按钮
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			},
		};
	},
	computed: {
		swiper() {
			return this.$refs.mySwiper.$swiper;
		},
	},
	methods: {
		handleClickSlide() {
			// console.log(this.swiper)
			console.log(this.swiper.activeIndex);
		},
	},
};
</script>

<style scoped lang="scss">
.swiper {
	width: 600px;
}
.swiper-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
</style>
